(function (doc) {
  let Tab = function (el) {
    this.oTabBox = doc.getElementsByClassName(el)[0];
    this.oHeader = this.oTabBox.getElementsByClassName("tab-header")[0];
    this.oHeaderItems = this.oHeader.getElementsByClassName("item");
    this.oContents = this.oTabBox.getElementsByClassName("content");
    this.activeInex = 0;
    this.init();
  };
  Tab.prototype.init = function () {
    this.bindEvent();
  };
  Tab.prototype.bindEvent = function () {
    this.oHeader.addEventListener(
      "click",
      this.onHeaderClick.bind(this),
      false
    );
  };
  Tab.prototype.onHeaderClick = function (ev) {
    const e = ev.event || window.event,
      tar = e.target || e.srcElement; 
    this.oHeaderItems[this.activeInex].className = "item";
    this.oContents[this.activeInex].className = "content";
    this.activeInex = [].indexOf.call(this.oHeaderItems, tar);
    this.oHeaderItems[this.activeInex].className = "item active";
    this.oContents[this.activeInex].className = "content active";
  };

  window.$Tab = Tab;
})(document);

// <div class="tab-box J_tab">
// <div class="tab-header">
//   <div class="item active">选项一</div>
//   <div class="item">选项二</div>
//   <div class="item">选项三</div>
// </div>
// <div class="tab-content">
//   <div class="content active">内容一</div>
//   <div class="content">内容二</div>
//   <div class="content">内容三</div>
// </div>
// </div>
